<!DOCTYPE html>
<html>
  <head>
    <title>Test page for Animatic JavaScript library</title>
    <meta name = "viewport" content = "width = device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="javascripts/animatic.js"></script>

    <script>
      var test;
      function clicked(event) {
        
        var secondsToAnimate = 1;
        
        // Move the DIV to the (X, Y) position that was clicked.
        animate(test.style, "left", event.clientX, secondsToAnimate);
        animate(test.style, "top", event.clientY, secondsToAnimate).next = function() {
            animate(test.style, "-webkit-transform", Math.floor(Math.random() * 360), 1);
            flash(test, 0.5);
        }


        // And make the font a random size.
        animate(test.style, "fontSize", Math.floor(Math.random()*31) + 4, secondsToAnimate);

        // And some random transparency
        animate(test.style, "opacity", Math.random(), 3);
      }
      
      function flash(element, time) {
        var origOpacity = element.style.opacity;
        animate(element.style, "opacity", 0, time).next = function() {
            animate(element.style, "opacity", origOpacity, time);
        };
      }
      
      document.onmousedown = clicked;

      function init() {
        test = document.getElementById("test");
        var test2 = document.getElementById("test2");
        drift(test2.style, -30, 30);
        var test3 = document.getElementById("test3");
        drift(test3.style, -120, 100);
        var test4 = document.getElementById("test4");
        drift(test4.style, 70, 200);
        var test5 = document.getElementById("test5");
        drift(test5.style, 140, 50);
      }
    </script>

  </head>
  <body onload="init()">

    <div id="test" style="position: absolute; top: 10px; left: 100px; font-size: 15pt; opacity: 1.0; -webkit-transform: rotate(0deg);">
      Click on the page and I'll follow you
    </div>

    <div id="test2" style="position: absolute; top: 100px; left: 200px; font-size: 15pt;">
      I am drifting.
    </div>

    <div id="test3" style="position: absolute; top: 400px; left: 600px; font-size: 15pt;">
      I am drifting.
    </div>

    <div id="test4" style="position: absolute; top: 700px; left: 100px; font-size: 15pt;">
      I am drifting.
    </div>

    <div id="test5" style="position: absolute; top: 600px; left: 500px; font-size: 15pt;">
      I am drifting.
    </div>

  </body>
</html>
